<script setup lang="ts">
import { ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
const router = useRouter();

let emit = defineEmits(["outLogin"]);

// 是否显示 个人中心/退出登录
let flag = ref(false);

type Props = {
  userInfo?: { avatarUrl?: string; name?: string };
};
let prop = withDefaults(defineProps<Props>(), {
  userInfo: () => {
    return {};
  },
});
</script>

<template>
  <!-- 未登录 -->
  <div class="loginEnd" @mouseover="flag = true" @mouseout="flag = false">
    <!-- 用户头像 -->
    <img class="avatarUrl" :src="userInfo.avatarUrl" alt="头像" />
    <!-- 用户昵称 -->
    <a class="nickName">{{ userInfo.name }}</a>
    <span class="arrow">&#xed1c;</span>
    <!-- 当鼠标经过时显示 个人中心/退出登录 -->
    <div class="centerLogout" v-show="flag">
      <div class="btn">
        <button class="my" @click.stop="router.push({ path: '/my' })">
          个人中心
        </button>
        <!-- 退出登录就是将userinfo的所有字段的信息都清空 -->
        <button
          class="outLogin"
          @click.stop="
            emit('outLogin', {
              avatarUrl: './src/assets/user.png',
              name: '',
              pwd: '',
            })
          "
        >
          退出登录
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 已经登录成功了
.loginEnd {
  @include flexCenter;
  gap: 0px 10px;
  cursor: pointer;
  position: relative;
  margin-bottom: 15px;
  // 鼠标经过时，小箭头旋转
  &:hover > .arrow {
    transform: scale(0.8) rotate(180deg);
  }
}

// 用户头像
.avatarUrl {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}

// 昵称
.nickName {
  font-size: 14px;
  letter-spacing: 1px;
}

// 小箭头
.arrow {
  font-size: 14px;
  transform-origin: center center;
  transition: all 0.2s;
}

// 个人中心/退出登录
.centerLogout {
  width: 120px;
  position: absolute;
  top: 99%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #333333;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.outLogin,
.my {
  background: #fff;
  height: 48px;
  font-size: 14px;
  @include flexCenterCenter;
  cursor: pointer;
}
</style>
